<template>
  <div class="comparision_container">
    <!-- 选择栏 -->
    <div class="comparision_select">
      <div class="select_box">
        <span>课程选择：</span>
        <Select ref="selectRef" :select-info="courseData.course_info" @search="getAIData" />
      </div>

      <div class="select_box">
        <span>对比：</span>
        <Select type="contrast" @search="getAIData" />
      </div>
    </div>

    <!-- 播放器 -->
    <div class="player_container">
      <div class="player_box left">
        <div class="player_title">
          <span class="class_name">课堂一：{{ courseData.course_info.subject_name }}</span>
          <span class="grade_name">{{ courseData.course_info.class_name }} 教师：{{ courseData.course_info.teacher_name }}</span>
        </div>
        <VideoPlayer id="origin" width="100%" :video-list="courseData.course_info.video_list" :url="courseData.course_info.video_list[0].play_url" :marker="courseData.video_info_point" />
      </div>

      <div class="player_box right">
        <div class="player_title">
          <span class="class_name">课堂二：{{ comparisionData.course_info ? comparisionData.course_info.subject_name : "" }}</span>
          <span class="grade_name"
            >{{ comparisionData.course_info ? comparisionData.course_info.class_name : "" }} 教师：{{ comparisionData.course_info ? comparisionData.course_info.teacher_name : "" }}</span
          >
        </div>

        <VideoPlayer
          id="contrast"
          :video-list="comparisionData.course_info ? comparisionData.course_info.video_list : []"
          :url="comparisionData.course_info ? comparisionData.course_info.video_list[0].play_url : ''"
          :marker="comparisionData.video_info_point ? comparisionData.video_info_point : {}"
          width="100%"
        />
      </div>
    </div>

    <!-- 整体分析 -->
    <div class="analysis_container">
      <div class="analysis_title">
        <span>课堂整体分析对比</span>
      </div>

      <div class="analysis_echart">
        <!-- 左边 -->
        <div class="echart_box">
          <div class="data_title">
            <span>课程分配时间</span>
          </div>

          <div class="compie_box">
            <ComparisonPie
              title="课堂一"
              anotherTitle="学生活动时间"
              half-title="教师授课时间"
              :another-value="courseData.time_allocation.student_time"
              :half-value="courseData.time_allocation.teacher_time"
              id="compie1"
              width="390px"
              height="350px"
              origin-color="#1F73FF"
              contrast-color="#00D5FF"
            />
            <ComparisonPie
              title="课堂二"
              anotherTitle="学生活动时间"
              half-title="教师授课时间"
              :another-value="comparisionData.time_allocation ? comparisionData.time_allocation.student_time : 0"
              :half-value="comparisionData.time_allocation ? comparisionData.time_allocation.teacher_time : 0"
              id="compie2"
              width="390px"
              height="350px"
              origin-color="#1DA732"
              contrast-color="#00FF9E"
            />
          </div>
        </div>

        <!-- 中间 -->
        <div class="echart_box box_middle">
          <div class="data_title">
            <span>课程专注度</span>
          </div>
          <div class="echart_middle">
            <span class="class_name">课堂一：</span>
            <div class="class_echart_box">
              <div class="class_echart">
                <Pie id="1" :value="focusFormat(courseData.focus.participation_rate)" height="160px" width="130px" color="#1978E5" />
                <span>总体参与率</span>
              </div>
              <div class="class_echart">
                <Pie id="2" :value="focusFormat(courseData.focus.head_up_rate)" height="160px" width="130px" color="#1978E5" />
                <span>总体抬头率</span>
              </div>
              <div class="class_echart">
                <Pie id="3" :value="focusFormat(courseData.focus.head_down_rate)" height="160px" width="130px" color="#1978E5" />
                <span>总体前排率</span>
              </div>
            </div>
          </div>

          <div class="echart_middle">
            <span class="class_name">课堂二：</span>
            <div class="class_echart_box">
              <div class="class_echart">
                <Pie id="4" :value="focusFormat(comparisionData.focus ? comparisionData.focus.participation_rate : 0)" height="160px" width="130px" color="#3CB277" />
                <span>总体参与率</span>
              </div>
              <div class="class_echart">
                <Pie id="5" :value="focusFormat(comparisionData.focus ? comparisionData.focus.head_up_rate : 0)" height="160px" width="130px" color="#3CB277" />
                <span>总体抬头率</span>
              </div>
              <div class="class_echart">
                <Pie id="6" :value="focusFormat(comparisionData.focus ? comparisionData.focus.head_down_rate : 0)" height="160px" width="130px" color="#3CB277" />
                <span>总体前排率</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 右边 -->
        <div class="echart_box">
          <div class="data_title">
            <span>数字模型对比</span>
          </div>

          <div class="st_ch_container">
            <StEchart :contras-data="contrastSTData" :x-data="st_x_data" :origin-data="originSTData" :x-max="xMax" :y-max="yMax" id="comparisionSt" width="300px" height="240px" />
            <ChEchart line-color="#00D5FF" :origin-point="originPoint" :contras-point="contrasPoint" id="comparisionCh" width="300px" height="240px" />
          </div>
          <div class="num_result_box">
            <div class="result_left">
              <span>课堂一的课堂类型为：</span>
              <span class="result_type">{{ formatType(courseData.suggest.rt_ch_type) }}</span>
            </div>
            <div class="result_border"></div>
            <div class="num_result">{{ courseData.suggest.behavior_evaluation }}</div>
          </div>

          <div class="num_result_box">
            <div class="result_left">
              <span>课堂二的课堂类型为：</span>
              <span class="result_type practice">{{ formatType(comparisionData.suggest ? comparisionData.suggest.rt_ch_type : "") }}</span>
            </div>
            <div class="result_border"></div>
            <div class="num_result">{{ comparisionData.suggest ? comparisionData.suggest.behavior_evaluation : "" }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 教师和学生行为分析 -->
    <div class="action_container">
      <div class="teacher_action">
        <div class="analysis_title">
          <span>教师行为分析对比</span>
        </div>
        <div class="teacher_box">
          <BarChart :axis-label="teaXaxisLabel" :contrast-data="contarstBarTeacherData" :origin-data="originBarTeacherData" height="350px" id="bar1" />
          <div class="action_box">
            <ComparisonPie
              title="课堂一"
              anotherTitle="巡视时长"
              half-title="讲台时长"
              :another-value="courseData.teacher_behavior.teaching_trajectory_duration.trajectory"
              :half-value="courseData.teacher_behavior.teaching_trajectory_duration.podium"
              id="compie3"
              width="400px"
              height="350px"
              origin-color="#61D9D8"
              contrast-color="#FFFFFF"
            />
            <ComparisonPie
              title="课堂二"
              anotherTitle="巡视时长"
              half-title="讲台时长"
              :another-value="comparisionData.teacher_behavior ? comparisionData.teacher_behavior.teaching_trajectory_duration.trajectory : 0"
              :half-value="comparisionData.teacher_behavior ? comparisionData.teacher_behavior.teaching_trajectory_duration.podium : 0"
              id="compie4"
              width="400px"
              height="350px"
              origin-color="#FDA224"
              contrast-color="#FFFFFF"
            />
          </div>
        </div>
      </div>

      <div class="stu_action">
        <div class="analysis_title">
          <span>学生行为分析对比</span>
        </div>
        <BarChart :axis-label="stuXaxisLabel" :contrast-data="contarstBarStuData" :origin-data="originBarStuData" height="350px" id="bar2" width="100%" />
      </div>
    </div>

    <!-- 情绪 + 专注度 -->
    <div class="stu_comparision_container">
      <div class="stu_emotion">
        <div class="analysis_title">
          <span>学生情绪对比</span>
        </div>

        <LineChart
          :legend-color="['#FFA669', '#3158FF']"
          :y-max="6"
          :xAxisData="xAxisEmoData"
          :y-axis-text="emoYAxisText"
          :origin-data="originData"
          :contrast-data="contrastData"
          id="line1"
          width="100%"
        />
      </div>

      <div class="stu_attention">
        <div class="analysis_title">
          <span>学生专注度对比</span>
        </div>

        <LineChart
          :legend-color="['#61D8D8', '#D378B7']"
          type="attention"
          :y-max="100"
          :xAxisData="xAxisAttenData"
          :y-axis-text="attenYAxisText"
          :origin-data="attentionOriginData"
          :contrast-data="attentionContrastData"
          id="line2"
          width="100%"
        />
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import Select from "./select.vue";
import VideoPlayer from "./video-player.vue";
import Pie from "../echart/pie.vue";
import ComparisonPie from "../echart/comparison-pie.vue";
import StEchart from "../echart/st.vue";
import ChEchart from "../echart/ch.vue";
import BarChart from "../echart/bar.vue";
import LineChart from "../echart/line.vue";
const emoYAxisText = ["恐惧", "厌恶", "愤怒", "快乐", "中性", "悲伤", "惊喜"];
const attenYAxisText = ["未学习", "未集中", "未听讲", "走神", "中性", "集中", "专注"];

const attentionOriginData = {
  name: "课堂一",
  data: [],
  type: "line",
  symbol: "none",
  lineStyle: {
    color: "#71D1CF",
    width: 2
  },

  areaStyle: {
    // 区域填充样式
    normal: {
      // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
      color: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: "rgba(49, 255, 233, 1)" },
          { offset: 1, color: "rgba(159, 88, 255, 0)" }
        ],
        false
      )
    }
  }
};

const attentionContrastData = {
  name: "课堂二",
  data: [],
  type: "line",
  symbol: "none",
  lineStyle: {
    color: "#D378B7",
    width: 2
  },

  areaStyle: {
    // 区域填充样式
    normal: {
      // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
      color: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: "rgba(211, 120, 183, 1)" },
          { offset: 1, color: "rgba(255, 166, 105, 0)" }
        ],
        false
      )
    }
  }
};

const originData = {
  name: "课堂一",
  data: [],
  type: "line",
  symbol: "none",
  lineStyle: {
    color: "rgba(49, 122, 255, 1)",
    width: 2
  },

  areaStyle: {
    // 区域填充样式
    normal: {
      // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
      color: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: "rgba(49, 122, 255, 1)" },
          { offset: 1, color: "rgba(159, 88, 255, 0)" }
        ],
        false
      )
    }
  }
};

const contrastData = {
  name: "课堂二",
  data: [],
  type: "line",
  symbol: "none",
  lineStyle: {
    color: "rgba(255, 212, 105, 1)",
    width: 2
  },

  areaStyle: {
    // 区域填充样式
    normal: {
      // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
      color: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: "rgba(255, 212, 105, 1)" },
          { offset: 1, color: "rgba(236, 198, 101, 0)" }
        ],
        false
      )
    }
  }
};

const teaXaxisLabel = ["讲授时长", "互动时长", "指导时长", "板书时长"];
const stuXaxisLabel = ["听讲时长", "实践时长", "阅读时长", "讨论时长"];
export default {
  props: {
    courseId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      xMax: 0,
      yMax: 0,
      courseData: {},
      comparisionData: {},
      originPoint: {},
      contrasPoint: {},
      originSTData: {},
      contrastSTData: {},
      originBarTeacherData: [],
      contarstBarTeacherData: [],
      originBarStuData: [],
      contarstBarStuData: [],
      stuXaxisLabel,
      teaXaxisLabel,
      originData,
      contrastData,
      xAxisEmoData: [],
      maxXAis: [],
      xAxisAttenData: [],
      attentionOriginData,
      attentionContrastData,
      emoYAxisText,
      attenYAxisText
    };
  },
  watch: {
    comparisionData() {
      this.init();
    }
  },
  computed: {
    formatType() {
      return (value) => {
        let text = "无";
        switch (value) {
          case 1:
            text = "讲授型课堂";
            break;
          case 2:
            text = "练习型课堂";
            break;
          case 3:
            text = "对话型课堂";
            break;
          case 4:
            text = "混合型课堂";
            break;
        }

        return text;
      };
    },

    // 专注度百分比格式化
    focusFormat() {
      return (value) => {
        return parseFloat(value) || 0;
      };
    },
    // 格式化秒为分钟
    formatTime() {
      return (value) => {
        const minutes = value / 60;
        return minutes.toFixed(1);
      };
    }
  },
  components: {
    Select,
    VideoPlayer,
    Pie,
    ComparisonPie,
    StEchart,
    ChEchart,
    BarChart,
    LineChart
  },
  methods: {
    // 获取ai数据
    getAIData({ id, type }) {
      console.info(id, type);
      const params = {
        course_id: String(id)
      };

      const success = (res) => {
        const localStorageName = type ? "comparisionData" : "courseData";
        this[localStorageName] = res.data;
        localStorage.setItem(localStorageName, JSON.stringify(res.data));
      };
      this.$ajax.get("api/ainew/courseInfo", {
        params,
        func: { success }
      });
    },
    init() {
      this.getCourseData();
      this.handleSTData();
      this.handleTeacherAndStuDuration();
      this.handleRTCH();
      this.handleStuEmo();
      this.handleAttention();
    },

    getCourseData() {
      this.courseData = JSON.parse(localStorage.getItem("courseData")) || {};
      this.$nextTick(() => {
        this.$refs.selectRef.echoSelect();
      });
    },
    // 对比st
    handleSTData() {
      const { comparisionData, courseData } = this;
      if (comparisionData.st_value) {
        this.transStData(comparisionData.st_value, "contrastSTData");
      }
      if (courseData.st_value) {
        this.transStData(courseData.st_value, "originSTData");
      }
    },

    // 对比教师、学生行为时长
    handleTeacherAndStuDuration() {
      const { comparisionData, courseData } = this;
      this.transDuration(courseData, "originBarTeacherData");
      this.transDuration(comparisionData, "contarstBarTeacherData");

      this.transStuDuration(courseData, "originBarStuData");
      this.transStuDuration(comparisionData, "contarstBarStuData");
    },

    // 对比rt-ch图
    handleRTCH() {
      const { comparisionData, courseData } = this;
      this.transRTChData(courseData, "originPoint", "#08fcff");
      this.transRTChData(comparisionData, "contrasPoint", "#FEA900");
    },

    // 对比情绪
    handleStuEmo() {
      const { comparisionData, courseData } = this;
      this.transStuEmoData(courseData, "originData");
      this.transStuEmoData(comparisionData, "contrastData");
    },

    // 对比专注
    handleAttention() {
      const { comparisionData, courseData } = this;
      this.transStuAttention(courseData, "attentionOriginData");
      this.transStuAttention(comparisionData, "attentionContrastData");
    },

    // 转换st数据
    transStData(object, key) {
      // const infoOriginSTValue = [];
      // for (const key in object) {
      //   infoOriginSTValue.push(object[key]);
      // }

      const originSTData = {
        name: key === "originSTData" ? "课堂1" : "课堂2",
        type: "line",
        step: "end",
        lineStyle: {
          color: key === "originSTData" ? "#FFD402" : "#3DE2FF"
        },
        itemStyle: {
          color: key === "originSTData" ? "#FFD402" : "rgb(33,148,246)",
          borderWidth: 1,
          borderColor: key === "originSTData" ? "#FFD402" : "#3DE2FF"
        },
        data: object.y
      };
      this.st_x_data = object.x;
      this[key] = originSTData;
      this.xMax = object.x[object.x.length - 1];
      this.yMax = object.y[object.y.length - 1];
    },

    // 转换教师行为时长bar数据
    transDuration(object, key) {
      if (object.teacher_behavior) {
        const data = [];
        for (const key in object.teacher_behavior.teaching_behavior_duration) {
          const second = this.formatTime(object.teacher_behavior.teaching_behavior_duration[key]);
          data.push(second);
        }
        this[key] = data;
      }
    },

    // 转换学生行为时长bar数据
    transStuDuration(object, key) {
      if (object.student_behavior) {
        const data = [];
        for (const key in object.student_behavior.studying_behavior_duration) {
          if (key !== "demonstrate_duration") {
            data.push(this.formatTime(object.student_behavior.studying_behavior_duration[key]));
          }
        }
        this[key] = data;
      }
    },

    // 转换rt-ch数据
    transRTChData(object, key, color) {
      const originPoint = {
        type: "effectScatter",
        symbolSize: 8,
        data: [],
        color: color
      };
      const rtData = [];
      const { rt_ch_value } = object;
      for (const key in rt_ch_value) {
        rtData.push(rt_ch_value[key]);
      }
      originPoint.data.push(rtData);

      this[key] = originPoint;
    },

    // 转换学生情绪数据
    transStuEmoData(object, key) {
      this[key].data = [];
      if (object.student_behavior) {
        const expressionData = object.student_behavior.expression.expression_value;
        const xAxis = expressionData.map((item, index) => index);
        if (xAxis && xAxis.length > this.maxXAis.length) {
          this.maxXAis = xAxis;
        }
        this[key].data = expressionData;
        this.xAxisEmoData = this.maxXAis;
      }
    },

    transStuAttention(object, key) {
      this[key].data = [];
      if (object.student_behavior) {
        const attenData = object.student_behavior.show.curve_value;
        const xAxis = attenData.map((item, index) => index);
        if (xAxis && xAxis.length > this.maxXAis.length) {
          this.maxXAis = xAxis;
        }
        this[key].data = attenData;
        this.xAxisAttenData = this.maxXAis;
      }
    }
  },
  created() {
    this.init();
  }
};
</script>
<style lang="scss" scoped>
.comparision_container {
  padding: 0 23px 15px;

  // 对比选择器
  .comparision_select {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 30px 55px;
    width: 100%;
    margin: 15px 0;
    background: #1b3c6f;
    border-radius: 4px;
    height: 97px;
    border: 1px solid;
    border-image: linear-gradient(315deg, rgba(43, 246, 249, 1), rgba(34, 242, 246, 0.35), rgba(30, 239, 245, 0), rgba(29, 239, 244, 0.09), rgba(19, 234, 241, 1)) 1 1;

    .select_box {
      display: flex;
      align-items: center;
      span {
        margin-right: 20px;
        color: #fff;
        font-size: 20px;
      }
    }
  }

  // 视频容器
  .player_container {
    display: flex;

    .player_box {
      width: 50%;
      height: 600px;
      padding: 35px 50px;

      padding-bottom: 0;
      box-sizing: border-box;
      color: #fff;
      font-size: 18px;

      .player_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        .class_name {
          margin-left: 70px;
        }

        .grade_name {
          margin-right: 30px;
        }
      }
    }

    .left {
      background: url("../../../assets/images/ai/compraision_left.png") no-repeat;
    }
    .right {
      background: url("../../../assets/images/ai/compraision_right.png") no-repeat;
    }
  }

  // 分析
  .analysis_container {
    margin-top: 20px;
    background: #1d345c;
    .analysis_title {
      padding: 8px 0;
      margin-bottom: 15px;
      padding-left: 25px;
      background: url("../../../assets/images/ai/compraision_title.png") no-repeat;
      span {
        font-size: 20px;
        color: #fff;
      }
    }

    .analysis_echart {
      display: flex;
      width: 100%;

      .echart_box {
        display: flex;
        flex-direction: column;
        justify-content: start;

        .compie_box {
          display: flex;
          justify-content: center;
          align-items: center;

          border: 1px solid;
          border-image: linear-gradient(180deg, rgba(0, 212, 255, 0), rgba(0, 255, 253, 0.4), rgba(0, 233, 255, 0)) 1 1;
        }

        .echart_middle {
          display: flex;
          align-items: center;

          .class_name {
            color: #fff;
            font-size: 17px;
            width: 70px;
          }

          .class_echart_box {
            display: flex;

            .class_echart {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              span {
                color: rgba(216, 240, 255, 0.8);
                font-size: 13px;
              }
            }
          }
        }

        .data_title {
          background: url("../../../assets/images/ai/data-header.png") no-repeat;
          width: 100%;
          padding: 10px 0;

          span {
            padding-left: 45px;
            color: #d8f0ff;
            font-size: 17px;
          }
        }

        .st_ch_container {
          display: flex;

          border: 1px solid;
          border-image: linear-gradient(180deg, rgba(0, 212, 255, 0), rgba(0, 255, 253, 0.4), rgba(0, 233, 255, 0)) 1 1;
        }

        .num_result_box {
          display: flex;
          color: #ffffff;
          justify-content: space-evenly;
          margin-bottom: 10px;

          .num_result {
            padding: 3px;
            background: #1b3f6e;
            border-radius: 6px;
            height: 48px;
            overflow: auto;
            width: 435px;
            line-height: normal;
          }

          .result_border {
            margin: auto 5px;
            border: 1px solid rgba(255, 255, 255, 0.09);
            height: 34px;
          }

          .result_left {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            .result_type {
              box-sizing: border-box;
              padding: 7px 15px;
              background: rgba(0, 213, 255, 0.3);
              border-radius: 4px;
            }

            .practice {
              background: rgba(0, 255, 158, 0.3);
            }
          }
        }
      }

      .box_middle {
        margin: 0 10px;
        width: 460px;
      }
    }
  }

  // 教育 学生行为分析
  .action_container {
    display: flex;
    margin-top: 15px;
    .teacher_action {
      display: flex;
      flex-direction: column;
      width: 1200px;
      background: #1d345c;
      margin-right: 15px;
      border: 1px solid;
      border-image: linear-gradient(180deg, rgba(0, 212, 255, 0), rgba(0, 255, 253, 0.4), rgba(0, 233, 255, 0)) 1 1;

      .teacher_box {
        display: flex;

        .action_box {
          display: flex;
        }
      }
    }

    .stu_action {
      flex: 1;
      display: flex;
      flex-direction: column;
      border: 1px solid;
      border-image: linear-gradient(180deg, rgba(0, 212, 255, 0), rgba(0, 255, 253, 0.4), rgba(0, 233, 255, 0)) 1 1;
    }
  }

  // 情绪 + 专注度
  .stu_comparision_container {
    display: flex;
    margin-top: 15px;
    width: 100%;

    .stu_emotion {
      width: 50%;
      background: #1d345c;
      margin-right: 15px;
      border: 1px solid;
      border-image: linear-gradient(180deg, rgba(0, 212, 255, 0), rgba(0, 255, 253, 0.4), rgba(0, 233, 255, 0)) 1 1;
    }

    .stu_attention {
      width: 50%;

      background: #1d345c;
      border: 1px solid;
      border-image: linear-gradient(180deg, rgba(0, 212, 255, 0), rgba(0, 255, 253, 0.4), rgba(0, 233, 255, 0)) 1 1;
    }
  }
}

.analysis_title {
  padding: 8px 0;
  margin-bottom: 15px;
  padding-left: 25px;
  background: url("../../../assets/images/ai/compraision_title.png") no-repeat;
  span {
    font-size: 20px;
    color: #fff;
  }
}
</style>
